<template>
<!--    外部框-->
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane name="first">
                <span slot="label"><i class="el-icon-date"></i> 文章列表</span>
                <div class="select-div">
                    文章标题：
                <el-input
                        placeholder="请输入文章标题"
                        v-model="input"
                        clearable>
                </el-input>
                <el-button type="primary" icon="el-icon-search" class="select" @click="select(input)">搜索</el-button>
                </div>
                <el-table
                        ref="multipleTable"
                        :data="essayList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="essayQuestion"
                            label="文章标题"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="essayCreateTime"
                            label="添加时间"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="essayIsDeleted"
                            label="是否显示"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.essayIsDeleted"
                                    active-color="#13ce66"
                                    inactive-color="#ebeef5"
                                    :active-value="0"
                                    :inactive-value="1"
                                     class="isDisplay"
                                    @change="isDisplay(scope.row.essayId)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="150">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" circle size="small"></el-button>
                            <el-button
                                    @click.native.prevent="deleteRow(scope.row.essayId, essayList)"
                                    type="danger" icon="el-icon-delete" circle
                                    style="background-color: #ebeef5 ;border-color: #ebeef5"
                                    size="small">
                            </el-button><!--将单选的id传到后台-->
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggledelete" class="delete">删除</el-button>
                </div>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage1"
                            :page-size="pageNum"
                            layout="total, prev, pager, next, jumper"
                            :total="total" style="text-align: right">
                    </el-pagination>
                </div>
            </el-tab-pane>
<!--            ================================-->
            <el-tab-pane name="second" label="新增文章" class="second">
                <el-form ref="form" :model="sizeForm" label-width="80px" size="medium" >
                    <el-form-item label="文章标题">
                        <el-input v-model="sizeForm.essayQuestion" ></el-input>
                    </el-form-item>
                    <el-form-item label="文章内容">
                        <el-input type="textarea" v-model="sizeForm.essayContent" class="textarea" rows="5"></el-input>
                    </el-form-item>
                    <el-form-item label="是否显示" class="essayIsDisplay">
                        <el-radio-group v-model="sizeForm.essayIsDeleted" size="medium">
                            <el-radio v-model="sizeForm.essayIsDeleted" border :label="1">是</el-radio>
                            <el-radio v-model="sizeForm.essayIsDeleted" border :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item size="large" class="create-button">
                        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
                        <el-button @click="back">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>

    export default {
        name: "articleList",
        data(){
            return{
                essayList:[],//列表数据
                input:'',//搜索时所查找的数据
                id:'',//单个删除的id
                deleteIdList:[],//复选框存入选择的id
                activeName: 'first', //tabs默认选择first
                currentPage1: 1,//默认在第一页
                page:'1',
                total:5,//默认总条数
                pageNum:5,//每页显示条数,
                tempList:[],
                sizeForm: {
                    essayContent:'',
                    essayIsDeleted:'',
                    essayQuestion:''
                }
            }
        },
        methods:{
//=========================================添加==========================================
            onSubmit(form) {
                this.$axios({method:'post',url:'/api/essay/add', params:{essayQuestion:this.sizeForm.essayQuestion,essayContent:this.sizeForm.essayContent,essayIsDeleted:this.sizeForm.essayIsDeleted}}).then((res)=>{
                    console.log(res)
                    this.activeName='first'
                }).catch((err)=>{
                    console.log(err)
                })
                console.log(this.sizeForm);
            },
            back(){
                this.$router.push({name:'articleList'})
            },


//============================list=================================================
            //复选框将id传入后台
            handleSelectionChange(val) {
                for (var i=0;i<val.length;i++){
                    this.deleteIdList.push(val[i].essayId)
                }
                this.multipleSelection = this.deleteIdList;
                this.deleteIdList=[]
            },
            //修改方法 跳转页面 不进行请求 在修改页面create方法中发起请求 得到传过去的id 的详细信息
            handleClick(row) {
                this.$router.push({name:'updateArticle',query:{essayList:row}})
                sessionStorage.setItem('essayList',JSON.stringify(row))
                console.log(row.essayId)
            },
            //单个删除 传入essay_id 发起请求后台删除
            deleteRow(essayId, rows) {
                this.id=essayId
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发起单个删除请求传出id  liekai yigeyemianwugeqingqiu
                    this.$axios.post('/api/essay/delete',[this.id]).then((res)=> {
                        console.log(res.data)//打印数据
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$axios.post('/api/essay/list').then((res)=> {
                            this.essayList=res.data.data
                            console.log(res)
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '删除失败'
                        });
                    });
                    console.log(this.id)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //批量删除 传入选中的Id数组
            toggledelete(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发起批量删除 删除请求
                    console.log(this.multipleSelection)
                        this.$axios.post('/api/essay/delete',[...this.multipleSelection]).then((res)=> {
                            this.$axios.post('/api/essay/list').then((res)=> {
                                this.essayList=res.data.data
                                console.log(res)
                        })
                            //提示用户删除成功
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //查询标题发起请求//查询分页？
            select(){
                this.$axios({method:'post',url:'/api/essay/list',params:{essayQuestion:this.input,page:this.page}}).then((res)=> {
                    console.log(res.data.data)
                    this.currentPage1=1
                    this.essayList=res.data.data
                })
                console.log(this.input)
                this.input=''
            },
            //分页每页几条
            handleSizeChange(val) {
                this.pageNum=val
                console.log(`每页 ${val} 条`);
            },
            //请求点击的当前页 当前页数据
            handleCurrentChange(val) {
                this.$axios.post('/api/essay/list?page='+val,).then((res)=> {
                    this.essayList=res.data.data
                    this.total=res.data.count
                    console.log(res.data)
                })
                this.currentPage1=val
                // this.currentChangePage(this.essayList,val);//获取用户点击的当前页后刷新数据
                // // this.$axios.post('/api/articleList',{page:val}).then((res)=> {
                // //     this.essayList=res.data
                // //     console.log(res.data)
                // // })
                // console.log(`当前页: ${val}`);
            },
            isDisplay(val){
                this.$axios.post('/api/essay/changeShowStatus?essayId='+`${val}`).then((res)=> {
                    console.log(res)
                })
            },
            //分页方法
            // currentChangePage(list,currentPage) {
            //     let from = (currentPage - 1) * this.pageNum;
            //     let to = currentPage * this.pageNum;
            //     this.essayList = [];
            //     for (; from < to; from++) {
            //         if (list[from]) {
            //             this.essayList.push(list[from]);
            //         }
            //     }
            // }
        },
        //页面初始化请求
        created() {
            this.$axios.post('/api/essay/list',{}).then((res)=> {
                this.essayList=res.data.data
                this.total=res.data.count
            })
        }
    }
</script>

<style scoped>
.delete{
    float: left;
}
    .el-input{
        width: 150px;
    }
    .select-div{
        float: left;
        padding-left: 20px;
    }
.select{
    margin-left: 20px;
}
.el-tabs{
    height: 560px;
}
.el-form{
    width: 40%;
    overflow: hidden;
    padding-top: 20px;
}
.el-radio-group{
    float: left;
}
.second .el-input{
    width: 100%;
}
/*.isDisplay{*/
/*    margin-top: 40px;*/
/*}*/

</style>